<template>
  <el-row style="justify-content: center;align-items:center;height: 5vh;margin-bottom: 2%">
    <el-col :span="15" style="text-align: left">
      <el-button :class="curOption==='今日'?'curSelect':''" size="large" @click="today">今日</el-button>
      <el-button :class="curOption==='昨日'?'curSelect':''" size="large" @click="yesterday">昨日</el-button>
      <el-button :class="curOption==='本月'?'curSelect':''" size="large" @click="thisMonth">本月</el-button>
      <el-date-picker
          v-model="curPeriod"
          type="daterange"
          range-separator="->"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          unlink-panels
          size="large"
          style="margin: 0 0 0 10px"
          @change="changePeriod"
      />
    </el-col>
    <el-col :span="9" style="text-align: right;">
      <el-select v-model="curType" placeholder="选择类别" size="large" @change="handleSelect" style="width: 30%;margin-left: 2%">
        <el-option
            v-for="item in typeList"
            :key="item"
            :label="item"
            :value="item"
        />
      </el-select>
    </el-col>
  </el-row>
  <div>
    <el-table :data="pageTableData(curGoodsList)"
              height="68.8vh"
              style="width: 100%;"
    >
      <el-table-column label="排名" width="70">
        <template #default="scope">
          {{pageSize * (currentPage - 1) + (scope.$index + 1)}}
        </template>
      </el-table-column>
      <el-table-column label="商品名/条码" width="300">
        <template #default="scope">
          <el-row>
            <el-col span="24" style="padding-left: 5%;">
              <el-row><el-text>{{ scope.row.goodsName }}</el-text></el-row>
              <el-row><el-text>{{ scope.row.code }}</el-text></el-row>
            </el-col>
          </el-row>
        </template>
      </el-table-column>
      <el-table-column prop="salesNum" label="销售量"/>
      <el-table-column prop="salesVolume" label="销售额"/>
      <el-table-column prop="cost" label="成本价" />
      <el-table-column prop="gross" label="毛利额" />
      <el-table-column prop="inventory" label="库存"/>
    </el-table>
    <div style="justify-content: center;align-items:center;height: 60px; background-color: rgba(255,255,255,0.72);boxShadow:1px 0px 1px #a6a6a6;z-index: 999;display: flex;padding: 5px 25px 5px 25px;">
      <div style="flex: 4;" >
        <el-pagination
            v-model:current-page="currentPage"
            v-model:page-size="pageSize"
            :background="true"
            layout="->,prev, pager, next, jumper"
            :total="curGoodsList.length"
            @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </div>

</template>

<script setup>
import {onMounted, ref} from "vue";
import {dateTimeUtils} from "@/utils/dateTimeUtils";
import request from "@/utils/request";
import {store} from "@/store";

let businessDate=ref({
  storeId:store.getLocalCurrentStoreMain().storeId,
  startDate:"",
  endDate:""
})
let typeList=ref([])
let curType=ref("全部商品")
let curGoodsList=ref([])
let goodsList=ref({})
let curOption=ref("本月")
const curPeriod=ref([])
const currentPage = ref(1)
const pageSize = ref(30)
onMounted(()=>{
  thisMonth()
})
const handleSelect = (key) => {
  curType.value=key
  if (curType.value==="全部商品"){
    curGoodsList.value=[]
    for (let key in goodsList.value){
      curGoodsList.value=curGoodsList.value.concat(goodsList.value[key])
    }
  }else
    curGoodsList.value=goodsList.value[key]
  curGoodsList.value.sort(function (a, b) {
    return b.salesNum-a.salesNum
  })
}

const today = () => {
  curType.value="全部商品"
  curOption.value="今日"
  businessDate.value.startDate=dateTimeUtils.getBusinessDateBo(new Date()).formatDateByDay
  businessDate.value.endDate=dateTimeUtils.getBusinessDateBo(new Date(),1).formatDateByDay
  request.post("/business/get/BusinessSalesRank",businessDate.value).then(res=>{
    goodsList.value=res.data
    typeList.value=Object.keys(res.data)
    typeList.value.unshift("全部商品")
    handleSelect(curType.value)
  })
}
const yesterday = () => {
  curType.value="全部商品"
  curOption.value="昨日"
  businessDate.value.startDate=dateTimeUtils.getBusinessDateBo(new Date(),-1).formatDateByDay
  businessDate.value.endDate=dateTimeUtils.getBusinessDateBo(new Date()).formatDateByDay
  request.post("/business/get/BusinessSalesRank",businessDate.value).then(res=>{
    goodsList.value=res.data
    typeList.value=Object.keys(res.data)
    typeList.value.unshift("全部商品")
    handleSelect(curType.value)
  })
}
const thisMonth = () => {
  curType.value="全部商品"
  curOption.value="本月"
  businessDate.value.startDate=dateTimeUtils.getBusinessDateBo(new Date()).formatDateByMonth
  businessDate.value.endDate=dateTimeUtils.getBusinessDateBo(new Date(),1,"month").formatDateByMonth
  request.post("/business/get/BusinessSalesRank",businessDate.value).then(res=>{
    goodsList.value=res.data
    typeList.value=Object.keys(res.data)
    typeList.value.unshift("全部商品")
    handleSelect(curType.value)
  })
}
const changePeriod = () => {
  curType.value="全部商品"
  curOption.value="时间段"
  businessDate.value.startDate=dateTimeUtils.getBusinessDateBo(curPeriod.value[0]).formatDateByDay
  businessDate.value.endDate=dateTimeUtils.getBusinessDateBo(curPeriod.value[1].setDate(curPeriod.value[1].getDate()+1)).formatDateByDay
  request.post("/business/get/BusinessSalesRank",businessDate.value).then(res=>{
    goodsList.value=res.data
    typeList.value=Object.keys(res.data)
    typeList.value.unshift("全部商品")
    handleSelect(curType.value)
  })
}
const handleCurrentChange = (e) => {
  currentPage.value = e;
};
const pageTableData = (list) => {
  return list.filter(
      (item, index) =>
          index < currentPage.value * pageSize.value &&
          index >= pageSize.value * (currentPage.value - 1)
  );
};
</script>

<style scoped>
.curSelect{
  color: #ffa202;
}
</style>